<template>
  <div class="add-car">
    <el-dialog
      v-el-drag-dialog="{ drag: true, full: true, resize: true }"
      :title="getTitle"
      :close-on-click-modal="false"
      :visible.sync="md.state"
      @close="closeMd"
      v-if="md.state"
      width="30%"
      append-to-body
    >
      <el-form :model="sourceData" ref="formRef" :label-width="'100px'">
        <el-form-item
          label="账户名称"
          prop="bankName"
          :rules="[
            { required: true, message: '请输入账户名称', trigger: 'blur' },
          ]"
        >
          <el-input
            maxlength="30"
            show-word-limit
            clearable
            placeholder="账户名称"
            v-model="sourceData.bankName"
          />
        </el-form-item>

        <el-form-item
          label="开户行"
          prop="cardName"
          :rules="[
            { required: true, message: '请输入开户行', trigger: 'blur' },
          ]"
        >
          <el-input
            maxlength="30"
            show-word-limit
            clearable
            placeholder="请输入开户行"
            v-model="sourceData.cardName"
          />
        </el-form-item>

        <el-form-item
          label="账号"
          prop="cardNo"
          :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]"
        >
          <el-input
            maxlength="30"
            show-word-limit
            clearable
            placeholder="请输入账号"
            v-model="sourceData.cardNo"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            icon="el-icon-circle-plus"
            type="primary"
            @click="onSubmit"
            :disabled="fm.sb.load"
            >{{getButtonText }}
          </el-button>
          <el-button icon="el-icon-error" @click="closeMd">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import elDragDialog from "@/directive/el-drag-dialog";
import { addBackInfo } from "@/api/services/order.service";

export default {
  name: "AddBank",
  directives: { elDragDialog },
  props: ["state", "datas"],
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
    getTitle() {
      return this.datas? '账户修改':'账户添加'
    },
    getButtonText() {
      return this.datas? '确认修改':'立即添加'
    }
  },
  data() {
    return {
      isShowMap: false,
      md: { state: this.state },
      sb: {
        load: false,
        text: "添加",
      },
      sourceData: {
        updId: "",
        bankName: "", // 账户名称
        cardName: "", //开户行
        cardNo: "", //卡号/微信/支付宝手机号
      },
      fm: {
        fname: "addCarFm",
        sb: { load: false, text: "立即添加" },
      },
      bankOptions: [],
    };
  },
  created() {
    if (this.datas) {
      let { id, bankName, cardName, cardNo } = this.datas;
      this.sourceData = {
        updId: id,
        bankName, // 账户名称
        cardName, //开户行
        cardNo, //卡号/微信/支付宝手机号
      };
    }
  },
  methods: {
    closeMd() {
      this.$emit("getMdState", false);
    },
    async onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          let loading = this.U.qloading("提交中，请稍后...");
          this.fm.sb.load = true; // 添加按钮禁用效果
          addBackInfo(this.sourceData)
            .then((res) => {
              this.fm.sb.load = false; // 取消按钮禁用效果
              this.U.qclose(loading);
              if (res.code === 1) {
                this.closeMd();
                this.$emit("reloadDg");
              } else {
                this.U.qerror(res.msg);
              }
            })
            .catch(() => {
              this.fm.sb.load = false; // 取消按钮禁用效果
              this.U.qclose(loading);
            });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.typeSty {
  padding: 0 20px 0 20px;
  font-weight: 600;
}
</style>